﻿<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
        .gallery { float: left; width: 65%; min-height: 12em; }
        * html .gallery { height: 12em; }
        /* IE6 */.gallery.custom-state-active { background: #eee; }
        .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
        .gallery li h5 { margin: 0 0 0.4em; cursor: move; font-size: 9pt; }
        .gallery li a { float: right; }
        .gallery li a.ui-icon-zoomin { float: left; }
        .gallery li img { width: 100%; cursor: move; }
        .trash { float: right; width: 32%; min-height: 18em; padding: 1%; }
        * html .trash { height: 18em; }
        /* IE6 */.trash h4 { line-height: 16px; margin: 0 0 0.4em; font-size: 10pt; }
        .trash h4 .ui-icon { float: left; }
        .trash .gallery h5 { display: none; }
    </style>

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            DataBind();
        }

        protected override void OnPreRenderComplete(EventArgs e)
        {
            DNA.UI.ClientScriptManager.AddCompositeScript(Page, "jQuery.ui.resizable.js", "jQuery");
            DNA.UI.ClientScriptManager.AddCompositeScript(Page, "jQuery.ui.dialog.js", "jQuery");
            base.OnPreRenderComplete(e);
        }
    </script>

    <script type="text/javascript">
        $(function() {
            // there's the gallery and the trash
            var $gallery = $('.gallery'), $trash = $('.trash');

            // image deletion function
            var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>';
            function deleteImage($item) {
                $item.fadeOut(function() {
                    var $list = $('ul', $trash).length ? $('ul', $trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);

                    $item.find('a.ui-icon-trash').remove();
                    $item.append(recycle_icon).appendTo($list).fadeIn(function() {
                        $item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
                    });
                });
            }

            // image recycle function
            var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>';
            function recycleImage($item) {
                $item.fadeOut(function() {
                    $item.find('a.ui-icon-refresh').remove();
                    $item.css('width', '96px').append(trash_icon).find('img').css('height', '72px').end().appendTo($gallery).fadeIn();
                });
            }

            // image preview function, demonstrating the ui.dialog used as a modal window
            function viewLargerImage($link) {
                var src = $link.attr('href');
                var title = $link.siblings('img').attr('alt');
                var $modal = $('img[src$="' + src + '"]');

                if ($modal.length) {
                    $modal.dialog('open')
                } else {
                    var img = $('<img alt="' + title + '" width="384" height="288" style="display:none;padding: 8px;" />')
							.attr('src', src).appendTo('body');
                    setTimeout(function() {
                        img.dialog({
                            title: title,
                            width: 400,
                            modal: true
                        });
                    }, 1);
                }
            }

            // resolve the icons behavior with event delegation
            $('ul.gallery > li').click(function(ev) {
                var $item = $(this);
                var $target = $(ev.target);

                if ($target.is('a.ui-icon-trash')) {
                    deleteImage($item);
                } else if ($target.is('a.ui-icon-zoomin')) {
                    viewLargerImage($target);
                } else if ($target.is('a.ui-icon-refresh')) {
                    recycleImage($item);
                }
                return false;
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <DotNetAge:SimpleListView ID="GalleryView" runat="server" CssClass="gallery ui-helper-reset ui-helper-clearfix"
        ItemCssClass="ui-widget-content ui-corner-tr">
        <ItemTemplate>
            <h5 class="ui-widget-header">
                <%# Eval("Text") %>
            </h5>
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' ToolTip='<%# Eval("Text") %>'
                Width="96" Height="72" />
            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("NavigateUrl") %>'
                CssClass="ui-icon ui-icon-zoomin" Text="View larger" ToolTip=" View larger image"> </asp:HyperLink>
            <a href="#" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
        </ItemTemplate>
        <Items>
            <DotNetAge:SimpleListItem Text="Photo1" NavigateUrl="Images/photos/image1.jpg" ImageUrl="~/Droppable/Images/photos/thumb_image1.jpg" />
            <DotNetAge:SimpleListItem Text="Photo1" NavigateUrl="Images/photos/image2.jpg" ImageUrl="~/Droppable/Images/photos/thumb_image2.jpg" />
            <DotNetAge:SimpleListItem Text="Photo1" NavigateUrl="Images/photos/image3.jpg" ImageUrl="~/Droppable/Images/photos/thumb_image3.jpg" />
            <DotNetAge:SimpleListItem Text="Photo1" NavigateUrl="Images/photos/image4.jpg" ImageUrl="~/Droppable/Images/photos/thumb_image4.jpg" />
        </Items>
    </DotNetAge:SimpleListView>
    <asp:Panel ID="TrashPanel" runat="server" CssClass="ui-widget-content ui-state-default trash">
        <h4 class="ui-widget-header">
            <span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
    </asp:Panel>
    <DotNetAge:Draggable ID="Draggable1" runat="server" Revert="Invalid" DragHelper="Clone"
        Cursor="move">
        <DisableDraggingElements Selector="a.ui-icon" />
        <Target TargetIDs="GalleryView>li" />
    </DotNetAge:Draggable>
    <DotNetAge:Droppable ID="GalleryViewDroppable" runat="server" ActiveCssClass="custom-state-active"
        OnClientDrop="recycleImage(ui.draggable);">
        <Target TargetID="GalleryView" />
        <Accept Selector="TrashPanel>li" />
    </DotNetAge:Droppable>
    <DotNetAge:Droppable ID="TrashPanelDroppable" runat="server" ActiveCssClass="ui-state-highlight"
        OnClientDrop="deleteImage(ui.draggable);">
        <Target TargetID="TrashPanel" />
        <Accept Selector="GalleryView>li" />
    </DotNetAge:Droppable>
    </form>
</body>
</html>
